import "../styles/Nav.scss"
import React, { Component } from 'react';

class Nav extends Component {
    constructor(props){
        super(props);
        this.state={
            currentIndex:0,
            tabs:[
                {icon:'',text:'综合'},{icon:'',text:'销量'},{icon:'',text:'新品'},{icon:'',text:'价格'},{icon:'',text:'筛选'},
            ]
        }
    }

    handleClick(index){
        //更新下标
        this.setState({currentIndex:index})
    }
    render() {
        return (
            <div className="nav">
                {
                    this.state.tabs.map((item,index)=>{
                        return (
                            <div className={'tab ' + (this.state.currentIndex==index?'active':'')} key={index} onClick={()=>{this.handleClick(index)}}>
                                <span className={'iconfont'+item.icon}></span>
                                <span className="text">{item.text}</span>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default Nav;